<template>
  <div class="mobile-items-container">
    <!-- 商品列表标题 -->
    <div class="section-title">
      <span class="title-icon"></span>
      <h3>交易市场</h3>
      <span class="title-count">共 {{ total }} 件商品</span>
    </div>

    <!-- 商品列表网格 -->
    <div class="mobile-items-grid">
      <div v-for="item in items" :key="item.id" class="mobile-item-card" @click="handleItemClick(item, $event)">
        <!-- 物品标签 -->
        <div class="mobile-item-badge" :class="getTypeClass(item.type)">
          {{ getTypeLabel(item.type) }}
        </div>

        <!-- 精灵专属标签组 -->
        <div v-if="item.type === 'pet'" class="mobile-corner-tags">
          <div class="mobile-tag level-tag">Lv.{{ item.description.level || 0 }}</div>
          <div class="mobile-tag iv-tag">个体:{{ item.description.iv || 0 }}</div>
          <div class="mobile-tag sp-tag">{{ item.description.nature || '--' }}</div>
          <div v-if="item.description.isShiny" class="mobile-tag shiny-tag">异色</div>
        </div>

        <!-- 商品图片 -->
        <div class="mobile-item-image">
          <el-image :src="item.image" fit="contain">
            <template #error>
              <div class="image-error">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-image>
        </div>

        <!-- 商品信息 -->
        <div class="mobile-item-info">
          <div class="mobile-item-name-row">
            <h4 class="mobile-item-name">{{ item.name }}</h4>
            <div class="mobile-item-stock">
              <el-tooltip content="当前在售数量" placement="top">
                <span class="stock-tag">
                  <el-icon><Goods /></el-icon>
                  <span>{{ getStockCount(item) }}</span>
                </span>
              </el-tooltip>
            </div>
          </div>

          <!-- 商品价格 -->
          <div class="mobile-item-price">
            <svg t="1744176905853" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6957" width="16" height="16">
              <path d="M60.974268 623.892437A430.636588 430.636588 0 0 1 13.963573 508.087872c-7.074877-29.788956-15.35993-67.956055-13.684302-110.219135 2.513443-62.277535 8.005782-112.360217 40.401271-189.252958 79.685456-188.973686 246.689788-247.527602 395.634566-183.9468 148.758597 63.673892 87.132695 227.606238 279.271458 376.644106 53.061577 41.145995 52.130672 45.335067 89.087595 64.790978 36.863832 19.455912 73.541484 36.026018 101.282448 53.62012 54.364844 34.722751 83.036713 65.814974 100.723906 97.372648 11.822492 21.03845 12.567216 39.098004 15.080659 58.926278 1.86181 13.591211 2.606534 21.503902 2.234171 36.026018a272.196581 272.196581 0 0 1-6.981786 44.683433c-17.035559 57.43683-26.716969 74.75166-41.332176 98.024282-14.894478 24.389707-33.512575 46.265972-55.295748 64.604797-33.047123 29.416594-46.824514 40.30818-71.586584 51.292858-22.341717 10.053772-53.992482 20.479907-116.363108 38.818733-52.316853 15.35993-127.627056 17.128649-181.247176 11.822491-26.716969-2.606534-83.129804-19.828274-95.697019-25.134431-18.338826-7.72651-34.722751-14.056663-50.920496-22.248626a937.235013 937.235013 0 0 1-105.657702-65.721883c-40.587452-28.858051-87.411966-76.334198-109.102049-99.51373-18.990459-20.293726-31.650765-37.701647-45.614338-56.226653-20.479907-27.368603-42.635443-59.577911-83.129804-128.464871v-0.09309z m435.849656-338.477007a23.831164 23.831164 0 0 0-37.050014-11.636311 70.562588 70.562588 0 0 0-26.437698 68.88696c4.282162 21.969355 12.753397 41.332176 25.786065 57.995373 14.801387 19.17664 35.467475 34.908932 62.091354 47.196876 22.155536 10.239953 48.220872 6.888696 67.211331-8.564325a23.924255 23.924255 0 0 0-2.606534-38.818732 202.471807 202.471807 0 0 1-54.178663-48.407053 215.969927 215.969927 0 0 1-34.815841-66.652788z" fill="#1296db" p-id="6958"></path>
            </svg>
            <span>{{ formatPriceDisplay(item.price) }}</span>
          </div>

          <!-- 卖家信息 -->
          <div class="mobile-item-seller">
            <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
            <span>{{ item.seller }}</span>
          </div>

          <!-- 购买按钮 -->
          <!-- <el-button type="primary" size="small" class="mobile-buy-button" @click.stop="handleBuy(item)">
            购买
          </el-button> -->
        </div>
      </div>
    </div>

    <!-- 空状态显示 -->
    <el-empty v-if="items.length === 0" description="暂无商品，请尝试其他搜索条件" :image-size="120" />

    <!-- 商品详情弹窗 -->
    <el-dialog
      v-model="detailVisible"
      :title="currentItem?.name || '商品详情'"
      width="90%"
      custom-class="mobile-item-detail-dialog"
      :modal="true"
      :close-on-click-modal="true"
      :destroy-on-close="true"
    >
      <div v-if="currentItem" class="mobile-item-detail-scrollable">
        <div class="detail-header">
          <el-image :src="currentItem.image" fit="contain" class="detail-image"></el-image>
          <div class="detail-basic-info">
            <div class="detail-type-badge" :class="getTypeClass(currentItem.type)">
              {{ getTypeLabel(currentItem.type) }}
            </div>
            <div class="detail-price">
              <svg t="1744176905853" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6957" width="16" height="16">
                <path d="M60.974268 623.892437A430.636588 430.636588 0 0 1 13.963573 508.087872c-7.074877-29.788956-15.35993-67.956055-13.684302-110.219135 2.513443-62.277535 8.005782-112.360217 40.401271-189.252958 79.685456-188.973686 246.689788-247.527602 395.634566-183.9468 148.758597 63.673892 87.132695 227.606238 279.271458 376.644106 53.061577 41.145995 52.130672 45.335067 89.087595 64.790978 36.863832 19.455912 73.541484 36.026018 101.282448 53.62012 54.364844 34.722751 83.036713 65.814974 100.723906 97.372648 11.822492 21.03845 12.567216 39.098004 15.080659 58.926278 1.86181 13.591211 2.606534 21.503902 2.234171 36.026018a272.196581 272.196581 0 0 1-6.981786 44.683433c-17.035559 57.43683-26.716969 74.75166-41.332176 98.024282-14.894478 24.389707-33.512575 46.265972-55.295748 64.604797-33.047123 29.416594-46.824514 40.30818-71.586584 51.292858-22.341717 10.053772-53.992482 20.479907-116.363108 38.818733-52.316853 15.35993-127.627056 17.128649-181.247176 11.822491-26.716969-2.606534-83.129804-19.828274-95.697019-25.134431-18.338826-7.72651-34.722751-14.056663-50.920496-22.248626a937.235013 937.235013 0 0 1-105.657702-65.721883c-40.587452-28.858051-87.411966-76.334198-109.102049-99.51373-18.990459-20.293726-31.650765-37.701647-45.614338-56.226653-20.479907-27.368603-42.635443-59.577911-83.129804-128.464871v-0.09309z m435.849656-338.477007a23.831164 23.831164 0 0 0-37.050014-11.636311 70.562588 70.562588 0 0 0-26.437698 68.88696c4.282162 21.969355 12.753397 41.332176 25.786065 57.995373 14.801387 19.17664 35.467475 34.908932 62.091354 47.196876 22.155536 10.239953 48.220872 6.888696 67.211331-8.564325a23.924255 23.924255 0 0 0-2.606534-38.818732 202.471807 202.471807 0 0 1-54.178663-48.407053 215.969927 215.969927 0 0 1-34.815841-66.652788z" fill="#1296db" p-id="6958"></path>
              </svg>
              <span>{{ formatPriceDisplay(currentItem.price) }}</span>
            </div>
            <div class="detail-seller">
              <span class="seller-label">卖家:</span>
              <span class="seller-name">{{ currentItem.seller }}</span>
            </div>
          </div>
        </div>
        
        <!-- 精灵详情 -->
        <div v-if="currentItem.type === 'pet'" class="detail-attributes">
          <div class="attribute-section">
            <div class="attribute-section-title">基本属性</div>
            <div class="attributes-grid">
              <div class="attribute-item">
                <span class="attribute-label">等级</span>
                <span class="attribute-value">{{ currentItem.description.level || 0 }}</span>
              </div>
              <div class="attribute-item">
                <span class="attribute-label">个体</span>
                <span class="attribute-value" :class="getIvClass(currentItem.description.iv)">
                  {{ currentItem.description.iv || 0 }}
                </span>
              </div>
              <div class="attribute-item">
                <span class="attribute-label">性格</span>
                <span class="attribute-value">{{ currentItem.description.nature || '无' }}</span>
              </div>
              <div class="attribute-item">
                <span class="attribute-label">特性</span>
                <span class="attribute-value">{{ currentItem.description.ability || '无' }}</span>
              </div>
              <div class="attribute-item">
                <span class="attribute-label">额外HP</span>
                <span class="attribute-value">{{ currentItem.description.addMaxHP || 0 }}</span>
              </div>
              <div v-if="currentItem.description.isShiny" class="attribute-item">
                <span class="attribute-label">异色</span>
                <span class="attribute-value shiny">是</span>
              </div>
            </div>
          </div>
          
          <div class="attribute-section">
            <div class="attribute-section-title">学习力属性</div>
            <div class="attributes-grid">
              <div class="attribute-item">
                <span class="attribute-label">HP</span>
                <span class="attribute-value">{{ currentItem.description.evHp || 0 }}</span>
              </div>
              <div class="attribute-item">
                <span class="attribute-label">攻击</span>
                <span class="attribute-value">{{ currentItem.description.evAtk || 0 }}</span>
              </div>
              <div class="attribute-item">
                <span class="attribute-label">防御</span>
                <span class="attribute-value">{{ currentItem.description.evDef || 0 }}</span>
              </div>
              <div class="attribute-item">
                <span class="attribute-label">特攻</span>
                <span class="attribute-value">{{ currentItem.description.evSa || 0 }}</span>
              </div>
              <div class="attribute-item">
                <span class="attribute-label">特防</span>
                <span class="attribute-value">{{ currentItem.description.evSd || 0 }}</span>
              </div>
              <div class="attribute-item">
                <span class="attribute-label">速度</span>
                <span class="attribute-value">{{ currentItem.description.evSp || 0 }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 道具详情 -->
        <div v-else-if="currentItem.type === 'item'" class="detail-attributes">
          <div class="attribute-section">
            <div class="attribute-section-title">道具信息</div>
            <div class="attributes-grid">
              <div class="attribute-item full-width">
                <span class="attribute-label">数量</span>
                <span class="attribute-value">{{ getStockCount(currentItem) }}</span>
              </div>
              <div class="attribute-item full-width">
                <span class="attribute-label">描述</span>
                <span class="attribute-value description">
                  {{ getItemDescription(currentItem) }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 价格走势图区域 -->
        <div class="price-chart-section-mobile">
          <h4 class="section-title">近7日价格走势</h4>
          <div ref="priceChartContainer" class="mobile-detail-chart-container"></div>
        </div>

        <!-- 底部购买按钮 -->
        <div class="detail-action">
          <el-button type="primary" size="large" class="detail-buy-button" @click="handleBuy(currentItem)">
            立即购买
          </el-button>
        </div>
      </div>
    </el-dialog>
    
    <!-- 购买数量选择弹窗 -->
    <el-dialog v-model="buyDialogVisible" :title="`购买 ${currentBuyItem?.name || '物品'}`" width="90%">
      <div class="buy-dialog-content">
        <div class="buy-item-info">
          <el-image :src="currentBuyItem?.image" fit="contain" class="buy-item-image"></el-image>
          <div class="buy-item-details">
            <h4>{{ currentBuyItem?.name }}</h4>
            <div class="buy-price-stock">
              <div class="buy-item-price">
                <span class="label">单价:</span>
                <span class="value">{{ formatPriceDisplay(currentBuyItem?.price) }}</span>
              </div>
              <div class="buy-item-stock">
                <span class="label">库存:</span>
                <span class="value">{{ getStockCount(currentBuyItem) }}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="buy-quantity-section">
          <div class="quantity-label">购买数量:</div>
          <el-input-number 
            v-model="buyQuantity" 
            :min="1" 
            :max="currentBuyItem ? getStockCount(currentBuyItem) : 1" 
            size="large" 
            controls-position="right"
          ></el-input-number>
        </div>

        <div class="buy-total">
          <span class="total-label">总价:</span>
          <span class="total-value">{{ formatPriceDisplay(calculateTotalPrice()) }}</span>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="buyDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmBuy" :loading="loading">
            确认购买
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
import { Picture, Goods } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as echarts from 'echarts/core'
import { LineChart, BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([TitleComponent, TooltipComponent, GridComponent, LegendComponent, LineChart, BarChart, CanvasRenderer])



// 属性定义
const props = defineProps({
  items: {
    type: Array,
    default: () => []
  },
  total: {
    type: Number,
    default: 0
  },
  loading: {
    type: Boolean,
    default: false
  }
})

// 事件
const emit = defineEmits(['buy', 'show-detail', 'refresh'])

// 本地状态
const detailVisible = ref(false)
const currentItem = ref(null)
const buyDialogVisible = ref(false)
const currentBuyItem = ref(null)
const buyQuantity = ref(1)

// 获取商品类型样式
const getTypeClass = (type) => {
  switch (type) {
    case 'pet': return 'badge-pet'
    case 'item': return 'badge-item'
    default: return ''
  }
}

// 获取商品类型标签
const getTypeLabel = (type) => {
  const itemTypeLabels = {
    'pet': '精灵',
    'item': '道具'
  }
  return itemTypeLabels[type] || '未知'
}

// 获取个体值样式
const getIvClass = (iv) => {
  if (!iv) return 'iv-common'
  
  const ivNum = parseInt(iv)
  if (ivNum >= 30) return 'iv-perfect'
  if (ivNum >= 25) return 'iv-great'
  if (ivNum >= 20) return 'iv-good'
  return 'iv-common'
}

// 获取库存数量
const getStockCount = (item) => {
  if (!item) return 0
  return item.quantity || 1
}

// 格式化价格显示
const formatPriceDisplay = (price) => {
  if (price === undefined || price === null) return '0'
  return price.toLocaleString() + ' XIN豆'
}

// 获取商品描述
const getItemDescription = (item) => {
  if (!item) return ''
  
  // 优先使用商品自己的描述
  if (item.description && typeof item.description === 'string') {
    return item.description
  }
  
  // 否则根据商品名称返回默认描述
  return getDefaultItemDescription(item.name)
}

// 获取默认商品描述
const getDefaultItemDescription = (itemName) => {
  if (!itemName) return '一个神奇的XIN计划道具'
  
  const defaultDescriptions = {
    '能量药剂': '提供宠物战斗所需的能量，可以恢复战斗中的宠物。',
    '经验宝珠': '能够为宠物提供额外的经验值，加速宠物升级。',
    '进化石': '特殊的能量石，能够帮助某些宠物进化为更强大的形态。',
    '学习装置': '可以帮助宠物学习特定的技能或提升学习力。',
    'XIN徽章': '象征荣誉的徽章，在XIN计划世界中具有特殊意义。',
    'XIN豆': 'XIN计划世界的通用货币，可用于购买各类物品。'
  }
  
  // 尝试从名称中匹配关键词
  for (const [key, desc] of Object.entries(defaultDescriptions)) {
    if (itemName.includes(key)) {
      return desc
    }
  }
  
  return '来自XIN计划世界的神秘道具，可能具有特殊效果。'
}

// 点击商品处理
const handleItemClick = (item, event) => {
  // 防止点击购买按钮时触发详情
  if (event.target.closest('.mobile-buy-button')) {
    return
  }
  
  currentItem.value = item
  detailVisible.value = true
  emit('show-detail', item)
}

// 购买处理
const handleBuy = (item) => {
  if (!item) return
  emit('buy',item)
  
}

// 暴露关闭弹窗的方法
const closeDetailDialog = () => {
  detailVisible.value = false
}

// 暴露方法给父组件
defineExpose({
  closeDetailDialog
})

// 计算总价
const calculateTotalPrice = () => {
  if (!currentBuyItem.value) return 0
  return currentBuyItem.value.price * buyQuantity.value
}

// 确认购买
const confirmBuy = () => {
  if (!currentBuyItem.value) return
  
  emit('buy', {
    item: currentBuyItem.value,
    quantity: buyQuantity.value
  })
  
  buyDialogVisible.value = false
}


const priceChartContainer = ref(null)
let priceChartInstance = null

// 初始化价格走势图
const initPriceChart = () => {
  if (!priceChartContainer.value || !currentItem.value) return

  // 销毁旧实例
  if (priceChartInstance) {
    priceChartInstance.dispose()
  }
  priceChartInstance = echarts.init(priceChartContainer.value)

  // 处理价格历史数据
  const item = currentItem.value
  const dates = []
  const prices = []
  const volumes = []

  if (item.priceHistory && item.priceHistory.length > 0) {
    const sortedHistory = [...item.priceHistory].sort((a, b) => new Date(a.date) - new Date(b.date))
    sortedHistory.forEach(record => {
      const dateObj = new Date(record.date)
      const month = dateObj.getMonth() + 1
      const day = dateObj.getDate()
      dates.push(`${month}月${day}日`)
      prices.push(record.price)
      volumes.push(1)
    })
  } else {
    const today = new Date()
    const month = today.getMonth() + 1
    const day = today.getDate()
    dates.push(`${month}月${day}日`)
    prices.push(item.price)
    volumes.push(1)
  }

  const option = {
    backgroundColor: '#fff',
    title: {
      show: false
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      backgroundColor: 'rgba(255,255,255,0.95)',
      borderColor: '#eee',
      borderWidth: 1,
      textStyle: { color: '#333' },
      padding: [8, 10]
    },
    legend: {
      data: ['价格'],
      top: 5,
      itemGap: 20,
      textStyle: { fontSize: 12 }
    },
    grid: {
      left: '8%',
      right: '8%',
      bottom: '18%',
      top: '18%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: true,
        data: dates,
        axisLine: { lineStyle: { color: '#ddd' } },
        axisTick: { alignWithLabel: true },
        axisLabel: { fontSize: 10, margin: 8 }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '价格',
        position: 'left',
        nameTextStyle: { fontSize: 11 },
        splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } },
        min: (value) => Math.floor(value.min * 0.9)
      }
    ],
    series: [
      {
        name: '价格',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        data: prices,
        lineStyle: { width: 2, color: '#3a7bd5' },
        itemStyle: { color: '#3a7bd5', borderWidth: 1, borderColor: '#fff' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(58, 123, 213, 0.18)' },
            { offset: 1, color: 'rgba(58, 123, 213, 0.03)' }
          ])
        }
      }
    ]
  }
  priceChartInstance.setOption(option)
  setTimeout(() => priceChartInstance && priceChartInstance.resize(), 100)
}

// 监听详情弹窗打开时初始化图表
watch([detailVisible, currentItem], async ([visible, item]) => {
  if (visible && item) {
    await nextTick()
    initPriceChart()
  }
})

// 销毁图表实例
onUnmounted(() => {
  if (priceChartInstance) {
    priceChartInstance.dispose()
    priceChartInstance = null
  }
})
</script>

<style scoped>
.mobile-items-container {
  padding: 10px 0;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 0 10px;
}

.section-title h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.title-count {
  margin-left: auto;
  font-size: 14px;
  color: #909399;
}

.mobile-items-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 5px;
}

.mobile-item-card {
  position: relative;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.mobile-item-card:active {
  transform: scale(0.98);
}

.mobile-item-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  font-size: 10px;
  border-radius: 10px;
  color: #fff;
  z-index: 1;
}

.badge-pet {
  background-color: #e6a23c;
}

.badge-item {
  background-color: #67c23a;
}

.mobile-corner-tags {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}

.mobile-tag {
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}

.level-tag {
  background-color: rgba(230, 162, 60, 0.8);
}

.iv-tag {
  background-color: rgba(103, 194, 58, 0.8);
}

.sp-tag {
  font-size: 12px;
  line-height: 12px;
  display: flex;
  justify-content: center;
  background-color: rgba(245, 108, 108, 0.9);
}

.shiny-tag {
  background-color: rgba(98, 106, 239, 0.8);
}

.mobile-item-image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  background-color: #f5f7fa;
  padding: 10px;
}

.mobile-item-image .el-image {
  max-height: 100%;
  max-width: 100%;
}

.mobile-item-info {
  padding: 10px;
}

.mobile-item-name-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}

.mobile-item-name {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  max-height: 2.6em;
  flex: 1;
}

.mobile-item-stock {
  flex-shrink: 0;
  margin-left: 5px;
  font-size: 12px;
  color: #909399;
}

.stock-tag {
  display: flex;
  align-items: center;
}

.mobile-item-price {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: bold;
  color: #f56c6c;
}

.mobile-item-price .icon {
  margin-right: 4px;
}

.mobile-item-seller {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: #606266;
}

.mobile-item-seller .el-avatar {
  margin-right: 5px;
}

.mobile-buy-button {
  width: 100%;
  padding: 6px;
  font-size: 12px;
}

/* 详情弹窗样式 */
.mobile-item-detail-dialog :deep(.el-dialog__body) {
  padding: 10px;
  /* 固定高度，超出滚动 */
  height: 75vh;
  max-height: 500px;
  min-height: 320px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mobile-item-detail-scrollable {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.mobile-item-detail {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.detail-header {
  display: flex;
  gap: 15px;
}

.detail-image {
  width: 120px;
  height: 120px;
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 10px;
}

.detail-basic-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.detail-type-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 4px;
  color: #fff;
  margin-bottom: 5px;
}

.detail-price {
  font-size: 18px;
  font-weight: bold;
  color: #f56c6c;
  display: flex;
  align-items: center;
}

.detail-price .icon {
  margin-right: 5px;
}

.detail-seller {
  font-size: 14px;
  color: #606266;
}

.seller-label {
  color: #909399;
  margin-right: 5px;
}

.attribute-section {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
}

.attribute-section-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #303133;
}

.attributes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.attribute-item {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 8px;
  border-radius: 4px;
}

.attribute-item.full-width {
  grid-column: span 3;
}

.attribute-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 3px;
}

.attribute-value {
  font-size: 14px;
  font-weight: bold;
  color: #303133;
}

.attribute-value.iv-perfect {
  color: #f56c6c;
}

.attribute-value.iv-great {
  color: #e6a23c;
}

.attribute-value.iv-good {
  color: #67c23a;
}

.attribute-value.shiny {
  color: #626aef;
}

.attribute-value.description {
  font-weight: normal;
  font-size: 13px;
  line-height: 1.5;
}

.detail-action {
  position: sticky;
  bottom: 0;
  background-color: #fff;
  padding: 10px 0;
  margin-top: 10px;
}

.detail-buy-button {
  width: 100%;
}

/* 购买弹窗样式 */
.buy-dialog-content {
  padding: 10px;
}

.buy-item-info {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.buy-item-image {
  width: 80px;
  height: 80px;
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 5px;
}

.buy-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.buy-item-details h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
}

.buy-price-stock {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.buy-item-price, .buy-item-stock {
  font-size: 14px;
}

.buy-item-price .value {
  font-weight: bold;
  color: #f56c6c;
}

.buy-quantity-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.quantity-label {
  font-size: 14px;
  font-weight: bold;
  color: #303133;
}

.buy-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.total-label {
  font-size: 14px;
  font-weight: bold;
  color: #303133;
}

.total-value {
  font-size: 18px;
  font-weight: bold;
  color: #f56c6c;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
}

.dialog-footer .el-button {
  flex: 1;
}

.image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #909399;
  background-color: #f5f7fa;
}

.price-chart-section-mobile {
  margin: 10px 0 0 0;
  padding: 0 0 10px 0;
}
.mobile-detail-chart-container {
  width: 100%;
  height: 180px;
  min-height: 120px;
  background: #f9fafb;
  border-radius: 6px;
  margin-top: 6px;
}
</style>
